# Component: Shop Checkout

Multi-column checkout interface with form validation and summary breakdown

Ecommerce Block

### BEM Anatomy

| Type      | Class Name                   | Description                                                                                                        |
| --------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| ==Block== | `.as-shop-checkout`          | The master checkout container. Orchestrates the 7/5 split between forms and summary.                               |
| Element   | `__form`                     | The wrapper for all customer input fields and shipping/payment selections.                                         |
| Element   | `__row`                      | The primary grid row (Bootstrap-based) housing the two main functional columns.                                    |
| Element   | `__column`                   | Major layout columns. Modifiers `--customer-details` and `--summary` define content areas.                         |
| Modifier  | `__column--customer-details` | The wider column (typically 7/12) containing address, contact, and note fields.                                    |
| Modifier  | `__column--summary`          | The narrower column (typically 5/12) hosting the basket list and total calculations.                               |
| Element   | `__field`                    | Wrapper for individual inputs. Modifiers like `--delivery-address` or `--phone` identify the data type.            |
| Modifier  | `__field--delivery-address`  | Specific layout for the address text area or multi-line input field.                                               |
| Modifier  | `__field--region`            | Specific layout for state/province selection, often rendered as a dropdown.                                        |
| Modifier  | `__field--buyer-email`       | Identification for the primary contact email field.                                                                |
| Modifier  | `__field--phone`             | Identification for the telephone input; may include formatting for country codes.                                  |
| Modifier  | `__field--customer-note`     | Specific layout for the optional "Notes to Seller" text area.                                                      |
| Element   | `__error`                    | A container for field-level validation messages. Displays only when the parent field is in an invalid state.       |
| Element   | `__label`                    | The descriptive title for an input. Often used with floating label logic or fixed above the input.                 |
| Element   | `__input`                    | The actual form control (text, tel, email) inside a field wrapper.                                                 |
| Element   | `__shipping-item`            | The display unit for a shipping method. Typically a flex container inside the summary or form area.                |
| Element   | `__shipping-action`          | The interactive shipping selection row. Features `cursor: pointer` for better UX.                                  |
| Element   | `__shipping-select`          | The radio input or custom checkbox used to pick a specific shipping method.                                        |
| Element   | `__shipping-title`           | The name of the shipping service (e.g., "Standard Ground" or "Express").                                           |
| Element   | `__shipping-price`           | The cost associated with the specific shipping method.                                                             |
| Element   | `__total-item`               | A summary row (Subtotal, Tax, Shipping, Total) using space-between alignment.                                      |
| Element   | `__total-label`              | The descriptive label for the summary row.                                                                         |
| Element   | `__total-price`              | The currency value for the specific summary row.                                                                   |
| Element   | `__payment-selection`        | Wrapper for the final payment gateway choice (Credit Card, PayPal, etc.).                                          |
| Element   | `__payment-methods`          | The group container for all available payment options.                                                             |
| Element   | `__payment-method`           | Individual payment option item (e.g., an icon + label for a specific provider).                                    |
| Element   | `__basket-list`              | The container for the list of products currently being purchased.                                                  |
| Element   | `__basket-item`              | A flexbox row for products, displaying quantity, title, variants, and options.                                     |
| Element   | `__product-info`             | Nested container within an item that groups title and variant details.                                             |
| Element   | `__title`                    | The name of the specific product in the basket.                                                                    |
| Element   | `__product-variant`          | Small text indicating specific choices like "Size: Large" or "Color: Blue".                                        |
| Element   | `__product-options`          | Container for additional paid or free add-ons (e.g., "Gift Wrapping").                                             |
| Element   | `__option-item`              | Small-scale flex row for individual product add-ons (e.g., "Gift Wrap").                                           |
| Element   | `__option-price`             | The cost of the specific add-on.                                                                                   |
| Element   | `__option-name`              | The label of the specific add-on.                                                                                  |
| Element   | `__product-price`            | The total price for the item (Quantity x Unit Price).                                                              |
| Element   | `__actions`                  | The bottom layout area for the final submission triggers.                                                          |
| Element   | `__button`                   | The base button class within the checkout context, inheriting global theme properties like padding and transition. |
| Modifier  | `__button--pay`              | The final submission action, typically aligned to the right.                                                       |
| Element   | `__state`                    | Contextual container for loading transitions or empty cart validation errors.                                      |
| Modifier  | `__state--loading`           | Applied to the block or specific elements to show a processing state during payment.                               |
| Modifier  | `__state--empty`             | Used to trigger a redirect or specialized view if the basket is cleared during checkout.                           |

### Data Breakdown & UX

The checkout interface uses a `row` with increased gutters (`$spacer * 1.5`) to provide visual breathing room between data entry and order verification. Labels for product variants and custom options (like gift wrapping or surcharges) are rendered as small-text sub-elements within each basket item.

##### Generated HTML (Summary Item)

```html
<div class="as-shop-checkout__basket-item list-group-item">
    <div class="as-shop-checkout__product-info">
        <div class="as-shop-checkout__title">2 x Coffee Beans</div>
        <div class="as-shop-checkout__product-variant">
            <small>Dark Roast</small>
        </div>
        <div class="as-shop-checkout__product-options">
            <span class="as-shop-checkout__option-item">
                <small class="as-shop-checkout__option-price">+ $2.00</small>
                <small class="as-shop-checkout__option-name">(Eco Packaging)</small>
            </span>
        </div>
    </div>
    <div class="as-shop-checkout__product-price">
        <strong>$34.00</strong>
    </div>
</div>
```

##### SCSS

```scss
.as-shop-checkout {
  &__field {
    margin-bottom: 1rem;
    
    // Increased height for text areas
    &--delivery-address {
      .as-shop-checkout__input {
        min-height: 200px;
      }
    }
  }

  &__shipping-action {
    display: flex;
    cursor: pointer;
    
    // Ensure text pushes price to the edge
    .as-shop-checkout__shipping-title {
      flex-grow: 1;
    }
  }
}
```
